<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script>-->
    <!--function myBaby1( name) {-->
    <!--alert("wait my baby1!" + name)-->
    <!--}-->
    <!--myBaby1("li")-->
    <!--var mybaby2 = function (name) {-->
    <!--alert("wait my baby2!" + name)-->
    <!--return "new name"+name;-->
    <!--}-->
    <!--//有返回值的函数-->
    <!--console.log(mybaby2("yang"))-->

    <!--//获取调用时,所有的入参,js中允许函数定义和被调用时参数不一致的情况-->
    <!--function maneyParam(a,b) {-->
    <!--alert(a);-->
    <!--alert(b);-->
    <!--for (var i = 0; i < arguments.length; i++) {-->
    <!--console.log("parameter : "+arguments[i])-->
    <!--}-->
    <!--}-->
    <!--maneyParam(1)//此时a=1,b为undefined-->
    <!--maneyParam(1,2,3,4,5,6,7)//此时a=1,b=2-->
    <!--</script>-->
    <script>
        window.onload = function () {
            var url = "http://www.baidu.com/login?username=index&password=123";
            var enUri = encodeURI(url)
            console.log(enUri)

            var deUri = decodeURI(enUri);
            console.log(deUri)

            var enComUri = encodeURIComponent(url)
            console.log(enComUri)

            var deComUri = decodeURIComponent(enComUri)
            console.log(deComUri)

            //解析字符串,把其作为脚本来执行
            var js = "var a=3; console.log(a)"
            eval(js)

            function h1Onclick() {
                alert("我被点击了!")
            }

            function mousemove() {
                console.log("鼠标晃来晃去~")
            }

            function mouseout() {
                console.log("鼠标离开了我~")
            }

            //二级联动
            function changeDistrict() {
                //获取区域的标签
                var district = document.getElementById("district")
                var city = document.getElementById("city")
                var cityvalue = city.value
                console.log(cityvalue)
                switch (cityvalue) {
                    case "gz":
                        district.innerHTML = "<option value='sz'>深圳</option><option value='sz'>广州</option>"
                        break;
                    case "sh":
                        district.innerHTML = "<option value='mh'>闵行</option><option value='bs'>宝山</option>"
                        break;
                    case "zj":
                        district.innerHTML = "<option value='hz'>杭州</option><option value='hz'>湖州</option>"
                        break;
                }
            }

            function begin() {
                document.getElementById("tip").innerHTML = "输入中...."
            }

            function end() {
                document.getElementById("tip").innerHTML = "输入完成...."
            }
        }
    </script>
</head>
<body>
    <h1 onclick="h1Onclick()" onmousemove="mousemove()" onmouseout="mouseout()">wait my baby go home!</h1>
    <select name="city" id="city" onchange="changeDistrict()">
        <option selected>请选择你所在的省份</option>
        <option value="gz">广东</option>
        <option value="sh">上海</option>
        <option value="zj">浙江</option>
    </select>
    <select name="district" id="district">
        <option selected>--请选择对应的区域--</option>
    </select>
    <br>
    <hr>
    请输入用户名:<input type="text" name="username" onfocus="begin()" onblur="end()">
    <span id="tip" style="color: red"></span>
</body>
</html>